<template>
	<div class="login-container">
		<div class="wrap">
			<div class="left"></div>
			<div class="right">
				<h2>平台管理</h2>
				<el-tabs v-model="activeName">
					<el-tab-pane label="密码登录" name="password">
						<div class="form">
							<div class="item">
								<div class="item-left">
									<span style="width: 14px; margin-right: 5px;">
										<i class="el-icon-mobile-phone icon"></i>
									</span>
									手机号
								</div>
								<div class="item-right">
									<el-input placeholder="请输入手机号" type="text" v-model="formData.username"
										:maxlength="11" clearable />
								</div>
							</div>
							<div class="item">
								<div class="item-left">
									<span style="width: 14px; margin-right: 5px;">
										<i class="el-icon-lock icon"></i>
									</span>
									密码
								</div>
								<div class="item-right">
									<el-input placeholder="请输入密码" type="password" v-model="formData.password"
										:maxlength="30" clearable />
								</div>
							</div>
						</div>


						<div class="register-btn">
							<el-button type="success" class="lgm-search-btn" @click="toLogin">
								立即登录
							</el-button>
						</div>

						<div class="tips">
							{{ tips }}
						</div>
					</el-tab-pane>

					<!-- <el-tab-pane label="验证码登录" name="code">
						<div class="form">
							<div class="item">
								<div class="item-left">
									<span style="width: 14px; margin-right: 5px;">
										<i class="el-icon-mobile-phone icon"></i>
									</span>
									手机号
								</div>
								<div class="item-right">
									<el-input placeholder="请输入手机号" type="text" v-model="formData.phoneNumber"
										:maxlength="11" clearable />
								</div>
							</div>
							<div class="item-wrap">
								<div class="item">
									<div class="item-left">
										<span style="width: 14px; margin-right: 5px;">
											<i class="el-icon-lock icon"></i>
										</span>
										验证码
									</div>
									<div class="item-right code-input">
										<el-input placeholder="请输入验证码" type="text" v-model="formData.code"
											:maxlength="6" clearable />
									</div>
								</div>
								<div class="code-btn" @click="getCode">
									<el-button type="info" plain :disabled="btnDisabled">
										{{ codeText }}
									</el-button>
								</div>
							</div>
						</div>

						<div class="register-btn login-btn">
							<el-button type="success" class="lgm-search-btn" @click="toLogin">
								登录
							</el-button>
						</div>

						<div class="tips">
							{{ tips }}
						</div>
					</el-tab-pane> -->
				</el-tabs>
			</div>
		</div>

	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	import {
		regionData
	} from 'element-china-area-data'
	import {
		storesAdmin
	} from '@/api/user'
	import {
		load_areas
	} from '@/api/admin'

	export default {
		name: 'Login',
		data() {
			return {
				defaultProps: {
					children: 'children',
					label: 'name',
					value: 'id',
				},
				activeName: 'password',
				tips: '* 温馨提示：建议使用谷歌、Microsoft Edge，版本 79.0.1072.62 及以上浏览器，360浏览器请使用极速模式',
				formData: {
					// username: "110",
					// password: "123123a",
					username: 'admin',
					password: '123456',
					provider: "platforms",
				},
				codeText: '获取验证码',
				countdown: 60,
				btnDisabled: false,
				redirect: null,
				loginForm: {
					username: '',
					password: '',
				},
				dialogVisible: false,
				ruleForm: {
					qyName: '',
					name: '',
					phone: '',
					code: '',
					password: '',
					qy: '',
					address: '',
					yqCode: '',
					city_id: '',
					province_id: '',
					region_id: '',
				},
				rules: {
					qyName: [{
						required: true,
						message: '请输入企业名称',
						trigger: 'blur'
					}, ],
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					qy: [{
						required: true,
						message: '请选择区域',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: 'blur'
					}, ],
					yqCode: [{
						required: true,
						message: '请输入邀请码',
						trigger: 'blur'
					}],
				},
				copyRegionData: [],
				selectedLabels: '',
			}
		},
		created() {
			let storageTime = localStorage.getItem('codeBtnTime')
			if (storageTime) {
				this.countdown = storageTime
				this.codeText = this.countdown
				this.getCode()
			}

			// this.copyRegionData = regionData;
			// console.log(this.copyRegionData);
			this.load_areasFn()
		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect
				},
				immediate: true,
			},
		},
		methods: {
			load_areasFn() {
				load_areas({})
					.then((response) => {
						if (response.code == 200) {
							this.copyRegionData = response.data
						}
					})
					.catch((error) => {})
			},
			handleChange(value) {
				console.log(value)
				this.ruleForm.province_id = value[0]
				this.ruleForm.city_id = value[1]
				this.ruleForm.region_id = value[2]
				// 获取中文内容
				const getLabelByValue = (data, value) => {
					for (const item of data) {
						if (item.id === value) return item.name
						if (item.children) {
							const name = getLabelByValue(item.children, value)
							if (name) return name
						}
					}
					return null
				}

				const selectedLabels = this.ruleForm.qy.map((val) =>
					getLabelByValue(this.copyRegionData, val),
				)
				console.log('选中的中文内容:', selectedLabels)
				this.selectedLabels = selectedLabels.join('-')
			},
			dialogConfirm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						storesAdmin({
								store_name: this.ruleForm.qyName,
								legal_person: this.ruleForm.name,
								store_phone: this.ruleForm.phone,
								area_info: this.selectedLabels,
								store_address: this.ruleForm.address,
								platform_id: this.ruleForm.yqCode,
								province_id: this.ruleForm.province_id,
								city_id: this.ruleForm.city_id,
								region_id: this.ruleForm.region_id,
								password: this.ruleForm.password,
							})
							.then((response) => {
								if (response.code == 200) {
									this.dialogVisible = false
									this.$refs.ruleForm.resetFields()
									this.$notifySuccess('注册成功')
								}
							})
							.catch((error) => {})
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			toLogin() {
				this.$store
					.dispatch('user/login', this.formData)
					.then(() => {
						localStorage.setItem('username', this.formData.username)
						this.$notifySuccess('登录成功')

						this.$router.push({
							path: this.redirect || '/'
						})
					})
					.catch(() => {})
			},
			toRegister() {
				this.dialogVisible = true
			},
			getCode() {
				let timer = setInterval(() => {
					this.countdown -= 1
					this.codeText = this.countdown
					this.btnDisabled = true
					localStorage.setItem('codeBtnTime', this.countdown)
					// 存储获取验证码间隔
					if (this.countdown === 0) {
						clearInterval(timer)
						this.codeText = '获取验证码'
						this.countdown = 60
						this.btnDisabled = false
						localStorage.removeItem('codeBtnTime')
					}
				}, 1000)
			},
			getCode2() {},
		},
	}
</script>

<style lang="scss" scoped>
	@import '~@/styles/variables.scss';

	::v-deep .qy-cascader {
		.is-focus {
			.el-input__inner {
				border-color: $fontColor !important;
			}
		}

		.el-input__inner:focus {
			border-color: $fontColor !important;
		}
	}

	.login-container {
		width: 100%;
		height: 100vh;
		background-image: url('~@/assets/images/loginbg.jpg');
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;

		.wrap {
			width: 800px;
			display: flex;
			height: 424px;
			background-image: url('~@/assets/images/login_bg.jpg');
			background-size: 100% 100%;

			.left {
				width: 400px;
				height: 100%;
			}

			.right {
				width: 400px;
				height: 100%;
				background-color: #fff;
				padding: 20px;
			}
		}

		.register {
			text-align: right;
			color: #a8abb2;
			margin-bottom: 20px;

			span {
				color: $fontColor;
				cursor: pointer;
			}
		}

		.register-btn {
			width: 100%;
			margin-bottom: 30px;

			::v-deep button {
				width: 100%;
				margin-left: 0;
			}
		}

		.login-btn {
			margin-top: 66px;
		}

		.tips {
			font-size: 12px;
			color: #a8abb2;
		}

		.form {
			width: 350px;

			.item-wrap {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item {
					width: calc(100% - 125px);
					margin: 0 !important;
				}

				.code-input {
					::v-deep input {
						width: 100px !important;
					}
				}

				.code-btn {
					width: 115px;
					height: 38px;

					::v-deep button {
						width: 100% !important;
						padding: 11px 20px !important;
					}
				}
			}

			.item {
				width: 100%;
				height: 38px;
				border: 1px solid #ccc;
				border-radius: 4px;
				padding: 0 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 15px 0 30px;

				.item-left {
					width: 78px;
					border-right: 1px solid #eee;
					display: flex;
					align-items: center;

					.icon {
						margin-right: 6px;
						color: $fontColor;
					}
				}

				.item-right {
					::v-deep input {
						width: 230px;
						height: 36px;
						border: unset;
					}
				}
			}
		}
	}
</style>